<template>
    <a-modal class="my-modal" 
    v-model:visible="modal_show" 
    title="服务器路径选择" 
    @ok="modelok" 
    width="70%" 
    :maskClosable="false" 
    :centered="true"
    cancelText="取消"
    okText="选择"
    :destroyOnClose="true"
    :zIndex="1099"
    >
    <div class="body-content">
        <a-row class="headerRow">
            <a-row>
                <a-col :span="18">
                    <a-breadcrumb>
                        <a-breadcrumb-item href="" @click="breadcrumb_root()">
                            <home-outlined />
                        </a-breadcrumb-item>
                        <a-breadcrumb-item href="" :key="item.key" v-for="(item, index ) in select_dirs" @click="breadcrumb_click(item, index)">
                            <folder-outlined/>
                            <span>{{ item.name }}</span>
                        </a-breadcrumb-item>
                    </a-breadcrumb>
                </a-col>
                <a-col :span="6">
                    <a-row>
                        <a-space>
                            <a-tooltip placement="topRight" >
                                    <template #title>
                                        <span>输入路径</span>
                                    </template>
                                    <a-button type="dashed" class="button28 processA" @click="input_dir">
                                        <template #icon><plus-circle-outlined /></template>
                                    </a-button>
                                </a-tooltip>
                            <a-tooltip placement="topRight" v-if="this.history_dirs?.length">
                                <template #title>
                                    <span>历史记录</span>
                                </template>
                                <a-button type="dashed" class="button28 processA" @click="show_history">
                                    <template #icon><history-outlined /></template>
                                </a-button>
                            </a-tooltip>
                            <a-tooltip placement="topRight">
                                <template #title>
                                    <span>新建文件夹</span>
                                </template>
                                <a-button type="dashed" class="button28 processA" @click="mk_dir" v-show="select_dirs?.length > 0 && vue_options?.can_mk_dir">
                                    <template #icon><folder-outlined /></template>
                                </a-button>
                            </a-tooltip>
                        </a-space>
                    </a-row>
                </a-col>
            </a-row>
        </a-row>
        <a-row style="margin-top: 20px">
            <a-table
                :data-source="dir_files"
                :columns="dir_columns"
                :class="['task-table']"
                size="small"
                :showHeader="true"
                tableLayout="fixed"
                :customRow="TableRow_event"
                bordered
                :rowSelection="rowSelection"
                :pagination="false"
                style="overflow-y: scroll; max-height: 450px"
                >
                <template #bodyCell="{record,column }">
                    <template v-if="column.dataIndex == 'type'">
                        <a-row>
                            <a-col :span="12">
                                <folder-outlined v-if="record.type == 'dir'" style="font-size: 22px;"/>
                                <file-outlined v-if="record.type != 'dir'" style="font-size: 22px;"/>
                            </a-col>
                            <a-col :span="12">
                                <div>{{ record.type == 'dir' ? '文件夹' : '文件' }}</div>
                            </a-col>
                        </a-row>
                    </template>
                </template>
            </a-table>
        </a-row>
    </div>
    <mk_dir />
    <select_history />
    <input_dir />
    </a-modal>
</template>
<script>
import { multipleCascaderProps } from 'ant-design-vue/lib/vc-cascader/Cascader';
import { defineAsyncComponent } from 'vue'
export default {
    components: {
        mk_dir: defineAsyncComponent(() => import('./mk_dir.vue')),
        select_history: defineAsyncComponent(() => import('./select_history.vue')),
        input_dir: defineAsyncComponent(() => import('./input_dir.vue')),
    },
    data() {
        return {
            modal_show: false,
            disks:[],//存储服务器配置的根分区
            select_dirs: [],//存储已经选择的路径
            dir_files: [],//存储已经选择的路径下的文件或文件夹


            dir_columns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 125,
                    align: 'center',
                },
                {
                    title: '类型',
                    dataIndex: 'type',
                    width: 50,
                    align: 'center',
                },
            ],
            TableRow_event: (record) => {
                return {
                    onDblclick: (event) => {
                        this.row_dblclick(record, event);
                    },
                };
            },
            
            selectedRowKeys: [], //table选择
            rowSelection:{ 
                type: 'radio', 
                onChange: this.table_onSelect_Change, 
                selectedRowKeys: this.selectedRowKeys
             },
            //传入的参数
            vue_options: {
                can_mk_dir: false,
                showfile: false,
                showfile_filter: ['*'],
                avtive_dir: '',
                multi:false,
                type: undefined,
                option: undefined
            },
            history_dirs: [],//历史路径


            
            
            
            file_or_dir_select: undefined,
            mitt_show_modal_select_server_dir_id:"",
            mitt_show_modal_select_server_dir_back_id:"",
            mitt_select_history_back_id:"",
            mitt_input_dir_back_id:"",
            mitt_mk_new_dir_back_id:"",

            

        };
    },
    beforeUnmount() {
        this.$mitt.off('show_modal_select_server_dir', this.mitt_show_modal_select_server_dir_id);
        this.$mitt.off('select_history_back', this.mitt_select_history_back_id);
        this.$mitt.off('input_dir_back', this.mitt_input_dir_back_id);
        this.$mitt.off('mk_new_dir_back', this.mitt_mk_new_dir_back_id);
    },
    mounted() {
        this.mitt_show_modal_select_server_dir_id=this.$mitt.on('show_modal_select_server_dir', this.show_modal_select_server_dir_fn);
        this.mitt_select_history_back_id=this.$mitt.on('select_history_back',  this.select_history_back_fn,this?.$?.uid);
        this.mitt_input_dir_back_id=this.$mitt.on('input_dir_back', this.input_dir_back_fn,this?.$?.uid);
        this.mitt_mk_new_dir_back_id=this.$mitt.on('mk_new_dir_back', this.mk_new_dir_back_fn,this?.$?.uid);
        this.get_disks()
        console.log("modal_select_server_dir")
    },
    methods: {
        show_modal_select_server_dir_fn(uid,_options){
            this.mitt_show_modal_select_server_dir_back_id=uid
            this.vue_options = Object.assign({}, {
                can_mk_dir: false,
                showfile: false,
                showfile_filter: ['*'],
                avtive_dir: '',
                multi:false,
                type: undefined,
                option: undefined
            }, _options);
            this.selectedRowKeys = [];
            this.file_or_dir_select = undefined;
            if(this.vue_options?.multi==true){
                this.rowSelection.type="checkbox"
            }
            else{
                this.rowSelection.type="radio"
            }
            this.$forceUpdate();
            if (this.vue_options?.avtive_dir) {
                this.init_input_dir(this.vue_options?.avtive_dir)
            }
            else {
                this.init_disk()
            }
            
            this.modal_show = true;
            console.log(this.vue_options)
        },
        select_history_back_fn(value){
            if (value) {
                this.init_input_dir(value)
            }
        },
        input_dir_back_fn(value) {
            if (value) {
                this.init_input_dir(value)
            }
        },
        mk_new_dir_back_fn() {
            let dir_string = this.select_dirs_to_dir()
            this.search_files(dir_string);
        },
        async get_disks() {
            this.disks =await this.$apis.get_disks({})
        },
        init_disk(){
            this.select_dirs = []
            this.dir_files = [];
            for (let i = 0; i < this.disks?.length; i++) {
                this.dir_files.push({
                    key: i,
                    type: 'dir',
                    name: this.disks[i],
                    fullname: this.disks[i],
                });
            }
            
        },
        async init_input_dir(_dir){
            this.select_dirs = []
            let dir_array = await this.$apis.get_dir_array({
                ph: _dir
            })
            if (dir_array?.dirs?.length) {
                for (let i = 0; i < dir_array?.dirs?.length; i++) {
                    let element = dir_array?.dirs[i];
                    this.select_dirs.push({
                        key: i,
                        type: 'dir',
                        name: element,
                        fullname: dir_array?.dirs.slice(0, i + 1).join("/"),
                    })
                }
                this.add_to_history_dirs(_dir)
            }
            this.search_files(_dir);
        },
        select_dirs_to_dir(){
            let _dirs=[]
            for (let i = 0; i < this.select_dirs.length; i++) {
                let element = this.select_dirs[i];
                _dirs.push(element?.name)
            }
            return _dirs.join("/")
        },
        breadcrumb_root(item, index) {
            this.init_disk()
        },
        breadcrumb_click(item,index){
            this.select_dirs = this.select_dirs.slice(0, index+1)
            this.search_files(item?.fullname);
        },
        input_dir(){
            this.$mitt.iemit('input_dir',"",this?.$?.uid);
        },
        show_history(){
            this.$mitt.iemit('select_history',this.history_dirs,this?.$?.uid);
        },
        mk_dir() {
            let pre_dir_fullname = this.select_dirs[this.select_dirs.length-1].fullname
            pre_dir_fullname= pre_dir_fullname+"/"
            console.log(pre_dir_fullname)
            this.$mitt.iemit('mk_new_dir',{pre_dir: pre_dir_fullname,},this?.$?.uid);
        },
        modelok() {
            if (this.file_or_dir_select?.length>0) {
                let select_dirs=[]
                for (let index = 0; index < this.file_or_dir_select?.length; index++) {
                    let  one_file_or_dir_select = this.file_or_dir_select[index];
                    let  select_dir = `${one_file_or_dir_select.fullname}`.replaceAll('//', '/');
                    select_dirs.push(select_dir)
                }
                let back_select_dir=undefined
                if(this.vue_options?.multi==true){
                    back_select_dir=select_dirs
                }
                else{
                    back_select_dir=select_dirs[0]
                }
                // const select_dir = `${this.file_or_dir_select.fullname}`.replaceAll('//', '/');

                this.$mitt.oemit('modal_select_server_dir_back',{
                    type: this.vue_options.type,
                    val: back_select_dir,
                    option: this.vue_options.option,
                },this?.mitt_show_modal_select_server_dir_back_id);
                this.modal_show = false;
                this.add_to_history_dirs(select_dirs[0])
            } else {
                this.$message.info('请选择进行选择');
            }
        },
        table_onSelect_Change(selectedRowKeys) {
            let find_ar=[]
            if(this.vue_options?.multi==true){
                find_ar=selectedRowKeys
            }
            else{
                find_ar=[selectedRowKeys[0]]
            }
            let select_files=[]
            for (let index = 0; index < find_ar?.length; index++) {
                let  one_find_ar = find_ar[index];
                let find_index=this.dir_files.findIndex(val => {
                    return val.key == one_find_ar - 0;
                });
                if(find_index>=0){
                    select_files.push(this.dir_files[find_index])
                }
            }
            this.selectedRowKeys = selectedRowKeys;
            this.file_or_dir_select = select_files;
        },
        row_dblclick(record, event) {
            if (record.type == 'dir') {
                this.select_dirs.push(record)
                this.search_files(record?.fullname);
            }
        },
        async search_files(ph) {
            this.selectedRowKeys = [];
            this.file_or_dir_select = undefined;
            this.dir_files = [];
            this.$Loading.start();
            let result=await this.$apis.get_files({
                ph: ph,
                showfile: this.vue_options?.showfile,
                filter: this.vue_options?.showfile_filter,
            })
            if (result) {
                result.forEach((_featrue, index) => {
                    _featrue.key = index;
                    this.dir_files.push(_featrue);
                });
            }
            this.$Loading.done();
        },
        add_to_history_dirs(_dir){
            let index= this.history_dirs.findIndex((val)=>{
                return val== _dir
            })
            if(index<0){
                this.history_dirs.push(_dir)
            }
            
        }
    },
};
</script>
<style>
.ml-20 {
    margin-left: 20px;
}
</style>
